<template>
	<div>
		<h1>blogs</h1>
		模糊搜索：<input
			style="width: 200px"
			@input="handleChange($event)"
		/>
		<!-- 模糊搜索：<el-input
			style="width: 200px"
			:value="keywords"
			:debounce="num"
			@input="onChange"
		/> -->
		<!-- 模糊搜索： -->
		<!-- <el-autocomplete
			class="inline-input"
			v-model="state2"
			placeholder="请输入内容"
			:trigger-on-focus="false"
		></el-autocomplete> -->

		<div class="blogs-container" style="padding: 25px">
			<ul @click="onDetailClick(item)" v-for="item in list" :key="item.blogsId">
				<li>{{ item.title }}</li>
				<li>{{ item.content }}</li>
				<el-divider></el-divider>
			</ul>
		</div>
	</div>
</template>
<script>
// 1. 博客详情
// 2. 登陆 校验邮箱登陆
// 3. 评论
import { debounce } from 'lodash'

export default {
	data() {
		return {
			list: [],
			num: 1000,
			keywords: '',
			handleChange: null,
			state2: ''
		}
	},
	watch: {
		keywords(v) {},
		state2(v) {
			console.log('v:', v)
		}
	},
	created() {},
	mounted() {
		this.getList()
		// 模糊搜索防抖
		this.handleChange = debounce(this.onChange, 500)
	},
	methods: {
		// 模糊搜索函数
		async onChange(e) {
			console.log(e.target.value, 'e')
			if (e.target.value) {
				const data = await this.$http.get('/api/search-mouth', {
					params: { keywords: e.target.value }
				})
				console.log('data:', data)
				this.list = data.data
			} else {
				this.getList()
			}
		},
		// 请求博客列表接口
		async getList() {
			const result = await this.$http.get('/api/blogsList')
			console.log(result.list, 'result')
			this.list = result.list
		},
		onDetailClick(item) {
			this.$router.push(`/detail/${item.blogsId}`)
		}
	}
}
</script>
<style lang="scss">
.blogs-container {
	cursor: pointer;
}
</style>
